<template>
  <view class="basket">
    <view class="header">
      <view class="header-fl">
        全部:({{carList.length}})
      </view>
      <view class="header-fr" @click="toggleDel">
        {{isDel?'完成':'管理'}}
      </view>
    </view>
    <view class="basket-menu" v-if="carList && carList.length>0">
      <uv-swipe-action>
          <uv-swipe-action-item v-for="(item, index) in carList" :key="index" @click.stop="handleRemove(index)" :show="showInit" :options="options">
            <view class="basket-menu-list">
              <image class="selectImg" @click.stop="handleClick(index)"
                :src="item.checked?'/static/images/selectActive.png':'/static/images/select.png'" mode="">
              </image>
              <image class="goodsImg" :src="item.productInfo.image" mode=""></image>
              <view class="goodsInfo">
                <view class="goodName text-twoline-ellipsis" @click.stop="toDetail(item)">
                  {{item.productInfo.store_name}}
                </view>
                <view class="suk">
                  {{item.productInfo.attrInfo.suk}}
                </view>
                <view class="info-tb">
                  <view class="price">
                    <text class="txt1">￥</text>
                    <text class="txt2">{{item.productInfo.price}}</text>
                  </view>
                  <uv-number-box v-model="item.cart_num" @change="(e)=>handleAddNumber(e,index)"></uv-number-box>
                </view>
              </view>
            </view>
          </uv-swipe-action-item>
      </uv-swipe-action>
    </view>
    <uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
    <view style="width: 100%;height: 140rpx;"></view>
    <view class="footer" v-if="!isDel">
      <view class="footer-warpper">
        <view class="fl" @click="handleToggle">
          <image class="selectImg"
            :src="selectAll?'/static/images/selectActive.png':'/static/images/select.png'" mode=""></image>
          <text class="allSelect">全选</text>
        </view>
        <view class="fr">
          <text class="txt1">共{{selectGoodsList.length}}件</text>
          <text class="totalAmount">
            ￥{{totalaMount}}
          </text>
          <view class="toPay" @click="handleBalance">
            去结算
          </view>
        </view>
      </view>
    </view>
    <view class="footer" v-if="isDel">
      <view class="footer-warpper">
        <view class="fl" @click="handleToggle">
          <image class="selectImg"
            :src="selectAll?'/static/images/selectActive.png':'/static/images/select.png'" mode=""></image>
          <text class="allSelect">全选</text>
        </view>
        <view class="fr">
          <view class="toPay" @click="handleDel">
            去删除
          </view>
        </view>
      </view>
    </view>
    <uv-modal ref="modal" title="确认删除吗？" :showCancelButton="true" @confirm="confirm"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        selectAll: false,
        carList: [
          {
            store_name: "A+精品｜南非红心西柚｜茶饮佳选",
            cart_num: "1",
            price: "24",
          }
        ],
        totalaMount: 0,
        selectGoodsList: [],
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#f56c6c'
          }
        }],
        cart_id: [],
        showInit: false,
        isDel: false
      }
    },
    onShow() {
      this.selectAll = false;
      this.carList = [];
      this.totalaMount = 0;
      this.selectGoodsList = [];
      this.getList();
    },
    methods: {
      toDetail(item){
        uni.navigateTo({
          url: `/pages/home/goodsDetail?id=${item.product_id}`
        })
      },
      toggleDel(){
        this.isDel = !this.isDel;
      },
      handleDel(){
        if (this.selectGoodsList.length == 0) {
          uni.showToast({
            title: "请选择商品",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        console.log("选中", this.selectGoodsList);
        this.cart_id = this.selectGoodsList.map(v=>v.id);
        this.$refs.modal.open();
      },
      getList() {
        reqApi.carList({}).then(res => {
          console.log("购物车列表", res.data.valid);
          res.data.valid.forEach(v => {
            v.checked = false;
          })
          this.carList = res.data.valid;
        })
      },
      handleRemove(index) {
        console.log("删除", index); 
        this.cart_id.push(this.carList[index].id);
        this.$refs.modal.open();
      },
      confirm() {
        reqApi.deleteCar({
          ids: this.cart_id
        }).then(res => {
          uni.showToast({
            title: "删除成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          this.showInit = false;
          this.selectAll = false;
          this.isDel = false;
          // this.carList = [];
          this.totalaMount = 0;
          this.selectGoodsList = [];
          setTimeout(() => {
            this.getList();
            this.getCartList();
          }, 1500)
        })
      },
      // 结算
      handleBalance() {
        if (this.selectGoodsList.length == 0) {
          uni.showToast({
            title: "请选择商品",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        } 
        let ids = this.selectGoodsList.map(v => v.id);
        console.log("下单cart_ids", ids);
        let temp = ids.join(",");
        uni.navigateTo({
          url: `/pages/home/goodsBuy?isnew=0&id=${temp}`
        })
        this.selectAll = false;
        this.carList = [];
        this.totalaMount = 0;
        this.selectGoodsList = [];

      },
      handleAddNumber(e, index) {
        setTimeout(() => {
          console.log(e.value, index);
          this.selectGoodsList = [];
          if (this.carList[index].checked) {
            this.summaryTotal();
          }
          let temp = {
            id: this.carList[index].id,
            number: e.value
          }
          reqApi.editCount(temp).then(res => {
            console.log("修改购物车数量");
          })
        }, 500)
      },
      handleClick(index) {
        this.selectGoodsList = [];
        this.carList[index].checked = !this.carList[index].checked;
        console.log("carList", this.carList);
        this.selectAll = this.carList.every(q => {
          return q.checked == true;
        });
        console.log("selectAll", this.selectAll);
        this.summaryTotal();
      },
      summaryTotal() {
        this.carList.forEach(v => {
          if (v.checked) {
            this.selectGoodsList.push(v);
          }
        })
        console.log("选中的商品集合", this.selectGoodsList);
        this.totalaMount = 0;
        console.log("开始计算价格");
        this.selectGoodsList.forEach(v => {
          this.totalaMount = tools.$h.Add(this.totalaMount, tools.$h.Mul(v.productInfo.price, v.cart_num));
        })
      },
      handleToggle() {
        if(this.carList.length == 0){
          uni.showToast({
            title: "购物车暂无数据",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        this.selectAll = !this.selectAll;
        if (this.selectAll) {
          this.carList.forEach(v => {
            v.checked = true;
          })
        } else {
          this.carList.forEach(v => {
            v.checked = false;
          })
          this.selectGoodsList = [];
        }
        this.summaryTotal();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header{
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;
    .header-fl{
      
    }
    .header-fr{
      
    }
  }
  .footer {
    position: fixed;
    bottom: 100rpx;
    // bottom: 0;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    // z-index: 100;
    .footer-warpper {
      display: flex;
      justify-content: space-between;

      .fl {
        display: flex;
        align-items: center;

        .selectImg {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }

        .allSelect {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
        }
      }

      .fr {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;

        .txt1 {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
        }

        .totalAmount {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #FF4F44;
          margin: 0 20rpx;
        }

        .toPay {
          width: 200rpx;
          height: 80rpx;
          background: #FF4F44;
          border-radius: 20rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 80rpx;
        }
      }
    }

  }

  .basket {
    background: #fff;
    width: 100vw;
    min-height: 100vh;

    .basket-menu {
      padding: 30rpx;
      box-sizing: border-box;

      .basket-menu-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;

        .selectImg {
          width: 32rpx;
          height: 32rpx;
        }

        .goodsImg {
          width: 160rpx;
          height: 160rpx;
          border-radius: 20rpx;
          margin: 0 20rpx;
        }

        .goodsInfo {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          .goodName {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
          }

          .info-tb {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              
              color: #FF4F44;
              .txt1{
                font-size: 24rpx;
              }
              .txt2{
                font-size: 36rpx;
              }
            }
          }
        }
      }
    }
  }
</style>